<template>
  <div class="app-container">
    <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="150px">

        <el-row :gutter="20">
                      <el-col :span="12">
                <el-form-item label="hasdelbtn" prop="hasdelbtn">
                  <el-input v-model="temp.hasdelbtn" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="hascompanyid" prop="hascompanyid">
                  <el-input v-model="temp.hascompanyid" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="styleAdddialog" prop="styleAdddialog">
                  <el-input v-model="temp.styleAdddialog" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="isdialogAdddialog" prop="isdialogAdddialog">
                  <el-input v-model="temp.isdialogAdddialog" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="treeJson" prop="treeJson">
                  <el-input v-model="temp.treeJson" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="keyrandom" prop="keyrandom">
                  <el-input v-model="temp.keyrandom" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="mode" prop="mode">
                  <el-input v-model="temp.mode" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="primarykey" prop="primarykey">
                  <el-input v-model="temp.primarykey" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="tablename" prop="tablename">
                  <el-input v-model="temp.tablename" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="tablenameshow" prop="tablenameshow">
                  <el-input v-model="temp.tablenameshow" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="one2many" prop="one2many">
                  <el-input v-model="temp.one2many" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="hasaddbtn" prop="hasaddbtn">
                  <el-input v-model="temp.hasaddbtn" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="hasdownloadreportbtn" prop="hasdownloadreportbtn">
                  <el-input v-model="temp.hasdownloadreportbtn" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="haseditbtn" prop="haseditbtn">
                  <el-input v-model="temp.haseditbtn" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="hashistorybtn" prop="hashistorybtn">
                  <el-input v-model="temp.hashistorybtn" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="beanmethod" prop="beanmethod">
                  <el-input v-model="temp.beanmethod" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="beanobject" prop="beanobject">
                  <el-input v-model="temp.beanobject" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="beanhistorymethod" prop="beanhistorymethod">
                  <el-input v-model="temp.beanhistorymethod" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="tablealiasname" prop="tablealiasname">
                  <el-input v-model="temp.tablealiasname" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="sqlcount" prop="sqlcount">
                  <el-input v-model="temp.sqlcount" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="tablenamehistorysql" prop="tablenamehistorysql">
                  <el-input v-model="temp.tablenamehistorysql" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="tablenamesql" prop="tablenamesql">
                  <el-input v-model="temp.tablenamesql" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="sqlcounthistory" prop="sqlcounthistory">
                  <el-input v-model="temp.sqlcounthistory" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="sqlpage" prop="sqlpage">
                  <el-input v-model="temp.sqlpage" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="sqlpagehistory" prop="sqlpagehistory">
                  <el-input v-model="temp.sqlpagehistory" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="sqlreport" prop="sqlreport">
                  <el-input v-model="temp.sqlreport" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="sqlsum" prop="sqlsum">
                  <el-input v-model="temp.sqlsum" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="删除标志" prop="deleteflag">
                  <select-option
                      v-model="temp.deleteflag"
                      :clearable=false
                      prop-name="Deleteflag"
                      :prop-ds-type=1
                      prop-url="/core/enum/getData4AddBy"
                  />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="foreignkey" prop="foreignkey">
                  <el-input v-model="temp.foreignkey" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="sqlprocedure" prop="sqlprocedure">
                  <el-input v-model="temp.sqlprocedure" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="height4adddialog" prop="height4adddialog">
                  <el-input v-model="temp.height4adddialog" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="width4adddialog" prop="width4adddialog">
                  <el-input v-model="temp.width4adddialog" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="chartjson" prop="chartjson">
                  <el-input v-model="temp.chartjson" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="chartheight" prop="chartheight">
                  <el-input v-model="temp.chartheight" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="chartwidth" prop="chartwidth">
                  <el-input v-model="temp.chartwidth" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="interceptaddmethod" prop="interceptaddmethod">
                  <el-input v-model="temp.interceptaddmethod" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="intercepteditmethod" prop="intercepteditmethod">
                  <el-input v-model="temp.intercepteditmethod" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="interceptobject" prop="interceptobject">
                  <el-input v-model="temp.interceptobject" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="hascheckbox" prop="hascheckbox">
                  <el-input v-model="temp.hascheckbox" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="datasource" prop="datasource">
                  <el-input v-model="temp.datasource" />
                </el-form-item>
            </el-col>
        </el-row>
    </el-form>
  </div>
</template>

<script>
import {createApi, updateApi, fetchList} from './api'
// 导入多选项组件
import SelectOption from '@/views/coding/components/SelectOption'

export default {
    name: 'TmptTable-FormDetail',

    components: { SelectOption },

    props: {
        isModule: {
            type: Boolean,
            default: false
        },
        row: {}
    },

    data() {
        return {
            rules: {
                hasdelbtn: [{ required: true, message: 'required', trigger: 'blur' }],
                hascompanyid: [{ required: true, message: 'required', trigger: 'blur' }],
                styleAdddialog: [{ required: true, message: 'required', trigger: 'blur' }],
                isdialogAdddialog: [{ required: true, message: 'required', trigger: 'blur' }],
                treeJson: [{ required: true, message: 'required', trigger: 'blur' }],
                keyrandom: [{ required: true, message: 'required', trigger: 'blur' }],
                mode: [{ required: true, message: 'required', trigger: 'blur' }],
                primarykey: [{ required: true, message: 'required', trigger: 'blur' }],
                tablename: [{ required: true, message: 'required', trigger: 'blur' }],
                tablenameshow: [{ required: true, message: 'required', trigger: 'blur' }],
                one2many: [{ required: true, message: 'required', trigger: 'blur' }],
                hasaddbtn: [{ required: true, message: 'required', trigger: 'blur' }],
                hasdownloadreportbtn: [{ required: true, message: 'required', trigger: 'blur' }],
                haseditbtn: [{ required: true, message: 'required', trigger: 'blur' }],
                hashistorybtn: [{ required: true, message: 'required', trigger: 'blur' }],
                beanmethod: [{ required: true, message: 'required', trigger: 'blur' }],
                beanobject: [{ required: true, message: 'required', trigger: 'blur' }],
                beanhistorymethod: [{ required: true, message: 'required', trigger: 'blur' }],
                tablealiasname: [{ required: true, message: 'required', trigger: 'blur' }],
                sqlcount: [{ required: true, message: 'required', trigger: 'blur' }],
                tablenamehistorysql: [{ required: true, message: 'required', trigger: 'blur' }],
                tablenamesql: [{ required: true, message: 'required', trigger: 'blur' }],
                sqlcounthistory: [{ required: true, message: 'required', trigger: 'blur' }],
                sqlpage: [{ required: true, message: 'required', trigger: 'blur' }],
                sqlpagehistory: [{ required: true, message: 'required', trigger: 'blur' }],
                sqlreport: [{ required: true, message: 'required', trigger: 'blur' }],
                sqlsum: [{ required: true, message: 'required', trigger: 'blur' }],
                deleteflag: [{ required: true, message: 'required', trigger: 'blur' }],
                foreignkey: [{ required: true, message: 'required', trigger: 'blur' }],
                sqlprocedure: [{ required: true, message: 'required', trigger: 'blur' }],
                height4adddialog: [{ required: true, message: 'required', trigger: 'blur' }],
                width4adddialog: [{ required: true, message: 'required', trigger: 'blur' }],
                chartjson: [{ required: true, message: 'required', trigger: 'blur' }],
                chartheight: [{ required: true, message: 'required', trigger: 'blur' }],
                chartwidth: [{ required: true, message: 'required', trigger: 'blur' }],
                interceptaddmethod: [{ required: true, message: 'required', trigger: 'blur' }],
                intercepteditmethod: [{ required: true, message: 'required', trigger: 'blur' }],
                interceptobject: [{ required: true, message: 'required', trigger: 'blur' }],
                hascheckbox: [{ required: true, message: 'required', trigger: 'blur' }],
                datasource: [{ required: true, message: 'required', trigger: 'blur' }],
            },
            temp: {
            }
        }
    },

    watch: {
        'row': {
            immediate: true, // vue首次赋值不触发watch的解决方法
            handler: function(nval){
                if (this.isModule) {
                    // this.temp = Object.assign({}, this.row) // copy obj
                    if (nval === undefined) {return}
                    if (nval.id === undefined) {return}
                    this.getList(nval.id)
                }
            }
        }
    },

    methods: {
        getList(_id) {
            this.resetTemp()
            fetchList({id:_id}).then(result => {
                if (!result.success) {
                    this.notify(result)
                    return
                }
                this.temp = result.map.rows[0]
            })
        },
        // 给外部调用，清空form
        resetTemp() {
            this.temp = {
                hasdelbtn: '',
                hascompanyid: '',
                styleAdddialog: '',
                isdialogAdddialog: '',
                treeJson: '',
                keyrandom: '',
                mode: '',
                primarykey: '',
                tablename: '',
                tablenameshow: '',
                one2many: '',
                hasaddbtn: '',
                hasdownloadreportbtn: '',
                haseditbtn: '',
                hashistorybtn: '',
                beanmethod: '',
                beanobject: '',
                beanhistorymethod: '',
                tablealiasname: '',
                sqlcount: '',
                tablenamehistorysql: '',
                tablenamesql: '',
                sqlcounthistory: '',
                sqlpage: '',
                sqlpagehistory: '',
                sqlreport: '',
                sqlsum: '',
                deleteflag: '',
                foreignkey: '',
                sqlprocedure: '',
                height4adddialog: '',
                width4adddialog: '',
                chartjson: '',
                chartheight: '',
                chartwidth: '',
                interceptaddmethod: '',
                intercepteditmethod: '',
                interceptobject: '',
                hascheckbox: '',
                datasource: '',
                id: undefined
            }
        },
        // 给外部调用，设置默认值，请根据实际情况修改id值
        defaultTemp() {
            this.temp = {
                deleteflag: 0, //设置默认值
            }
        },
        // 树表： 拿当前节点ID作为父节点ID，建立树关系
        setParentNodeId(id) {
            this.temp.tmptTableId = id
        },
        // 给外部调用，插入记录
        createData() {
            this.$refs['dataForm'].validate((valid) => {
                if (valid) {
                    const param = Object.assign({}, this.temp)
                    createApi(param).then((r) => {
                        this.notify(r)
                        if (r.success) {
                            this.resetTemp()
                            // 从父组件调用此方法，进行回调下
                            if (this.isModule) {
                                this.$emit('createResult')
                            }
                        }
                    })
                }
            })
        },
        // 给外部调用，修改记录
        updateData() {
            this.$refs['dataForm'].validate((valid) => {
                if (valid) {
                    const param = { id:this.temp.id }
                    param.hasdelbtn = this.temp.hasdelbtn
                    param.hascompanyid = this.temp.hascompanyid
                    param.styleAdddialog = this.temp.styleAdddialog
                    param.isdialogAdddialog = this.temp.isdialogAdddialog
                    param.treeJson = this.temp.treeJson
                    param.keyrandom = this.temp.keyrandom
                    param.mode = this.temp.mode
                    param.primarykey = this.temp.primarykey
                    param.tablename = this.temp.tablename
                    param.tablenameshow = this.temp.tablenameshow
                    param.one2many = this.temp.one2many
                    param.hasaddbtn = this.temp.hasaddbtn
                    param.hasdownloadreportbtn = this.temp.hasdownloadreportbtn
                    param.haseditbtn = this.temp.haseditbtn
                    param.hashistorybtn = this.temp.hashistorybtn
                    param.beanmethod = this.temp.beanmethod
                    param.beanobject = this.temp.beanobject
                    param.beanhistorymethod = this.temp.beanhistorymethod
                    param.tablealiasname = this.temp.tablealiasname
                    param.sqlcount = this.temp.sqlcount
                    param.tablenamehistorysql = this.temp.tablenamehistorysql
                    param.tablenamesql = this.temp.tablenamesql
                    param.sqlcounthistory = this.temp.sqlcounthistory
                    param.sqlpage = this.temp.sqlpage
                    param.sqlpagehistory = this.temp.sqlpagehistory
                    param.sqlreport = this.temp.sqlreport
                    param.sqlsum = this.temp.sqlsum
                    param.deleteflag = this.temp.deleteflag
                    param.foreignkey = this.temp.foreignkey
                    param.sqlprocedure = this.temp.sqlprocedure
                    param.height4adddialog = this.temp.height4adddialog
                    param.width4adddialog = this.temp.width4adddialog
                    param.chartjson = this.temp.chartjson
                    param.chartheight = this.temp.chartheight
                    param.chartwidth = this.temp.chartwidth
                    param.interceptaddmethod = this.temp.interceptaddmethod
                    param.intercepteditmethod = this.temp.intercepteditmethod
                    param.interceptobject = this.temp.interceptobject
                    param.hascheckbox = this.temp.hascheckbox
                    param.datasource = this.temp.datasource
                    updateApi(param).then((r) => {
                        this.notify(r)
                        if (r.success) {
                            this.resetTemp()
                            // 从父组件调用此方法，进行回调下
                            if (this.isModule) {
                                this.$emit('updateResult')
                            }
                        }
                    })
                }
            })
        },
        // 给外部调用，清除校验
        clearValidate() {
            this.$refs['dataForm'].clearValidate()
        }
    }

}
</script>
<style>

</style>
